<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Cropper</title>
<link href="css/jquery-ui-1.7.3.custom.css" rel="Stylesheet" type="text/css" /> 
<link href="css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
</head>
<body>
    <div>
        <h1>Manipular Imagem #Test</h1>
        <form id="form" action="#" class="dxFormFluid" method="post">
            <div class="content">
                <div class="boxes">
                    <div id="crop_container"></div>
                    <div class="result">
                        <div class="txt">Here you will see the cropped image</div>
                    </div> 
                    <div class="cleared"></div> 
                </div>  
                <br />
                <span class="button-wrapper" id="crop">
                    <span class="l"> </span>
                    <span class="r"> </span>
                    <a class="button" href="javascript:void(0)">Crop</a>
                </span>
                &nbsp;
                <span class="button-wrapper" id="restore">
                    <span class="l"> </span>
                    <span class="r"> </span>
            
                    <a class="button" href="javascript:void(0)">Restore</a>
                </span>
            </div>
        </form>
    </div>
    <script type="text/javascript">
    var a = 0;
        $(document).ready(function(){
           var cropzoom = $('#crop_container').cropzoom({
                width:500,
                height:400,
                bgColor: '#CCC',
                enableRotation:true,
                enableZoom:true,
                zoomSteps:10,
                rotationSteps:10,
                selector:{        
                  centered:true,
                  borderColor:'blue',
                  borderColorHover:'red'
                },
                image:{
                    source:'images/tank.jpg',
                    width:1024,
                    height:768,
                    minZoom:10,
                    maxZoom:150
                }
            });
            $('#crop').click(function(){ 
                cropzoom.send('ImageCropperServlet', 'POST', {}, function(rta){
                    $('.result').find('img').remove();
                    var img = $('<img />').attr('src','LoadImage?a=' + a++);
                    $('.result').find('.txt').hide().end().append(img);
                });
            });
            $('#restore').click(function(){
                $('.result').find('img').remove();
                $('.result').find('.txt').show()
                cropzoom.restore();
            })
        })
</script>
</body>
</html>